<template>
  <div>
    <a-modal :title="type == 'add' ? '新增权限组' : '编辑权限组'" :visible="visible" @before-open="open" @before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="500px" :mask-closable="false">
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form" :rules="rules">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="24">
                <a-form-item field="name" label="权限组名称：">
                  <a-input v-model="form.name" max-length="20" show-word-limit allow-clear />
                </a-form-item>
                <a-form-item label="备注：">
                  <a-textarea v-model="form.remark" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { findWarehouseListByParam } from '@/api/warehouse'
  import { updatePackageWarehouse } from '@/api/order'
  import { saveOrUpdateDataPermissonGroup, copyDataPermissonGroup } from '@/api/system'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['type', 'info'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {},
        rules: {
          name: [{ required: true, message: '请输入权限组名称' }],
        },
        loading: false,
      })

      const open = () => {
        if (props.type != 'add') data.form = _.cloneDeep(props.info)
        if (props.type == 'copy') data.form.remark = ''
      }
      const handleOk = () => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            let params = {
              ...data.form,
              name: data.form.name,
              remark: data.form.remark,
              isEnable: true,
            }
            try {
              data.loading = true
              if (props.type != 'copy') {
                const res: any = await saveOrUpdateDataPermissonGroup([params])
                if (res.code == 'SUCCESS') {
                  data.form = {}
                  props.type == 'add' ? Message.success('新增成功') : Message.success('编辑成功')
                  emit('save')
                  visible.value = false
                }
              } else {
                const res: any = await copyDataPermissonGroup(params)
                if (res.code == 'SUCCESS') {
                  data.form = {}
                  Message.success('复制成功')
                  emit('save')
                  visible.value = false
                }
              }
            } catch (error) {}
            data.loading = false
          }
        })
      }

      const handleCancel = () => {
        formRef.value.clearValidate()
        formRef.value.resetFields()
        visible.value = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
      }
    },
  })
</script>

<style lang="less" scoped></style>
